<script lang="ts" setup>
import { useTimeAgo } from '@peng_kai/kit/libs/vueuse';

const props = defineProps<{
  userId: string;
}>();

const emits = defineEmits<{
  showGameRecord: [];
}>();

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const isOwn = computed(() => userInfo.value?.uid === props.userId);

const userDetailQry = useQuery({
  queryKey: [apis.apiUserDetail.id, toRef(props, 'userId')],
  queryFn: () => apis.apiUserDetail({ id: props.userId }, { ignoreCode: [15003] }),
});

const userDetail = computed(() => userDetailQry.data.value);
const regTime = computed(() => userDetail.value?.reg_time ?? Date.now());
const timeAge = useTimeAgo(regTime);

const gameTopList = computed(() => userDetail.value?.user_game_top?.slice(0, 4));
const showStats = computed(() => isOwn.value || (!isOwn.value && userDetail.value?.show_statistics === 1));
const showGame = computed(() => isOwn.value || (!isOwn.value && userDetail.value?.show_played_games === 1));
</script>

<template>
  <div class="user-profile-wrapper pb-1">
    <div class="header mt-$header-height-neg h-75 flex items-center justify-center px-3 -mb-16">
      <div class="banner m-[0_auto] text-center">
        <div class="relative mx-auto mb-[6px] h-20 w-20 rounded-[50%] text-3">
          <TAvatar class="w-20" :avatar="userDetail?.avatar" :level="userDetail?.level" :levelScale="0.4" :exp="[userInfo?.play_amount ?? 0, userInfo?.next_level?.total_wager ?? 0]" />
        </div>
        <p class="mt-5 text-5 leading-normal">
          {{ userDetail?.nickname }}
        </p>
        <p class="text-[14px] text-slate300 leading-normal">
          {{ timeAge }} on the platform
        </p>
      </div>
    </div>

    <TCard v-if="showStats || showGame" class="mx-3 my-4">
      <template #header>
        <div class="mb-[6px] w-full flex-between">
          <p><i class="i-local:rollover mr-2.5" />{{ $t('kggxan5BngfUpNj9bFuhn') }}</p>
          <p class="cursor-pointer text-3.5 text-yellow500 decoration-underline" @click="emits('showGameRecord')">
            {{ $t('bxDkh4G4OcsDvzFnvPfG') }} <i class="i-ion:ios-arrow-forward ml-1 text-3" />
          </p>
        </div>
      </template>
      <div class="grid gap-3">
        <div v-if="showStats" class="flex items-center justify-center gap-3">
          <div class="data-item">
            <p class="box flex justify-center">
              {{ $t('3IsBxgn31TkGmF0Jrud1d') }}
              <ATooltip class="van-cover__popver max-w-40" placement="topLeft" :offset="[-10, 8]">
                <template #title>
                  {{ $t('qsXjZuBl_8piIirWip9H7') }}
                </template>
                <div>
                  <i class="i-ri:question-line ml-1 text-4 text-sys-text-body" />
                </div>
              </ATooltip>
            </p>
            <TAmount :value="userDetail?.user_game_statistics?.valid_amount" :decimals="2" symbol="$" format="fixed-dec" iconPos="left" />
          </div>
          <div class="data-item">
            <p class="box-pc">
              {{ $t('laC1K7Co4OfjDbNxmPs0') }}
            </p>
            <div>{{ userDetail?.user_game_statistics?.bet_count ?? 0 }}</div>
          </div>
        </div>
        <div v-if="showStats" class="data-item">
          <p class="box-pc">
            {{ $t('lM7H9Xqy7l9Bju265d9J') }}
          </p>
          <div>{{ userDetail?.user_game_statistics?.win_count ?? 0 }}</div>
        </div>
      </div>
      <div v-if="!showStats && showGame" class="text-center text-3.5 text-sys-text-body">
        {{ $t('avVxqlcQ4D6qeY7zrxbxN') }}
      </div>
    </TCard>

    <TCard
      v-if="showStats || showGame"
      class="mx-3 my-4"
      icon="i-local:data" :title="$t('veUetfsl2cGsguWxNe4N')"
    >
      <div class="grid gap-3">
        <div v-if="showGame " class="grid grid-cols-4 gap-2 lt-mobile:(grid-cols-2 gap-6)">
          <div v-for="(item, index) in gameTopList" :key="index" class="flex flex-col items-start justify-start rounded-2 bg-sys-layer-d">
            <TGameCover class="w-full" :detail="item.game" />
            <div class="m-2 text-left">
              <p class="mb-2 text-[14px] text-sys-text-body">
                Wagered
              </p>
              <TAmount :value="item.bet_amount" :decimals="2" symbol="$" format="fixed-dec" iconPos="left" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="showStats && !showGame" class="my-4 text-center text-3.5 text-sys-text-body">
        {{ $t('t2yUOouLub0QKpLbQezZv') }}
      </div>
    </TCard>

    <TCard v-if="!showStats && !showGame" class="mx-3 my-4 text-center">
      {{ $t('r0w1j4QuiFbTgOtHIge') }}
    </TCard>
  </div>
</template>

<style lang="scss" scoped>
.user-profile-wrapper {
  background:
    url('../../../assets/imgs/user/profile_bg.png') no-repeat center 12px / calc(100% - 12px * 2) auto,
    linear-gradient(180deg, #a12f2a 0%, rgb(38 39 46 / 60%) 71%, theme('colors.sys.layer.c') 100%) no-repeat center
      top/auto 300px,
    theme('colors.sys.layer.c');
}

.data-item {
  --uno: 'flex-1 rounded-2 bg-sys-layer-c p-2.5 text-center h-16 box-border';
}

.box-pc {
  --uno: 'mb-[2px] text-3.5 text-sys-text-body leading-normal';
}
</style>
